<template>
    <div class="physician-info">
        <input type="file" id="physician-info1" >
        <input type="file" id="physician-info2" >
        <div class="upload-content">
            <div class="name" :title="file1.name">{{ file1.name }}</div>
            <label class="btn" @click="handleImport">导入</label>
        </div>
      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <div class="el-upload__tip" slot="tip">
              <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
            </div>
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
  import { importTemplate, importTemplate2 } from "@/api/his/nurse";
  import { getToken } from "@/utils/auth";
export default {
    name: 'PhysicianInfo',
    data() {
        return {
            file1: {
                name: ''
            },
            file2: {
                name: ''
            },
          upload: {
            // 是否显示弹出层（用户导入）
            open: false,
            // 弹出层标题（用户导入）
            title: "",
            // 是否禁用上传
            isUploading: false,
            // 是否更新已经存在的用户数据
            updateSupport: 0,
            // 设置上传的请求头部
            headers: { Authorization: "Bearer " + getToken() },
            // 上传的地址
            url: process.env.VUE_APP_BASE_API + "/his/nurse/importData"
          }
        }
    },
    methods: {
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      /** 下载模板操作 */
      importTemplate() {
        importTemplate().then(response => {
          this.$download.name(response.msg);
        });
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      },
      handleImport() {
        this.upload.title = "导入";
        this.upload.open = true;
      },
      handleImport2() {
        this.upload2.title = "导入";
        this.upload2.open = true;
      },
      submitFileForm2() {
        this.$refs.upload2.submit();
      },
      /** 下载模板操作 */
      importTemplate2() {
        importTemplate2().then(response => {
          this.$download.name(response.msg);
        });
      },
      // 文件上传中处理
      handleFileUploadProgress2(event, file, fileList) {
        this.upload2.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess2(response, file, fileList) {
        this.upload2.open = false;
        this.upload2.isUploading = false;
        this.$refs.upload2.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      },
        handleInput1(e) {
            this.file1 = e.target.files[0]
        },
        handleInput2(e) {
            this.file2 = e.target.files[0]
        }
    }
}
</script>
<style scoped lang="scss">
.physician-info {
    height: 100%;
    display: flex;
    flex-direction: column;
}
#physician-info1, #physician-info2 {
    display: none;
}

.upload-content {
    display: flex;
    height: 58px;
    margin-top: 20px;

    .name {
        width: 380px;
        height: 100%;
        background: #FFFFFF;
        border-radius: 5px;
        line-height: 58px;
        padding: 0 20px;
        margin-right: 9px;
        font-weight: 500;
        font-size: 16px;
        color: #4B4B4B;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .btn {
        text-align: center;
        line-height: 58px;
        width: 167px;
        height: 100%;
        background: #4373F1;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
    }
}
</style>
